<template>
  <div class="app-container">

    <el-table
        ref="multipleTable"
        :data="shippingOrderList1"
        border
        fit
        highlight-current-row
        style="width: 95%;margin-top:20px;"
    >
      <el-table-column label="id"
                       align="center"
                       fixed="left"
                       min-width="80px"
                       key="1"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.id}}</span>
          </span>
      </el-table-column>
      <el-table-column label="出发地"
                       align="center"
                       min-width="100px"
                       key="2"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.start}}</span>
          </span>
      </el-table-column>
      <el-table-column label="目的地"
                       align="center"
                       min-width="100px"
                       key="3"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.target}}</span>
          </span>
      </el-table-column>
      <el-table-column label="收货人"
                       align="center"
                       min-width="90px"
                       key="4"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.consignee}}</span>
          </span>
      </el-table-column>
      <el-table-column label="货物内容"
                       align="center"
                       min-width="120px"
                       key="5"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.goods}}</span>
          </span>
      </el-table-column>
      <el-table-column label="总重量"
                       align="center"
                       min-width="80px"
                       key="6"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.weight}}</span>
          </span>
      </el-table-column>
      <el-table-column label="总距离"
                       align="center"
                       min-width="80px"
                       key="7"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.distance}}</span>
          </span>
      </el-table-column>
      <el-table-column label="状态"
                       align="center"
                       min-width="90px"
                       key="8"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{state[scope.row.state]}}</span>
          </span>
      </el-table-column>
      <el-table-column label="订单备注"
                       align="center"
                       min-width="100px"
                       key="9"
                       show-overflow-tooltip>
          <span slot-scope="scope">
              <span>{{scope.row.desc}}</span>
          </span>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="200"
                       key="10"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
              icon="el-icon-search"
              type="primary"
              size="mini"
              @click="scanDesc(scope.row)">
            详情
          </el-button>
          <el-button

              type="primary"
              size="mini"
              @click="Operate(scope.row,8)"
              v-if="scope.row.state==6">
            确认收货
          </el-button>
          <el-button

              type="primary"
              size="mini"
              @click="Operate(scope.row,9)"
              v-if="scope.row.state==7">
            结算
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :page-sizes="[10, 20, 50, 100, 500, 1000]"
        :current-page="listForm.page"
        :page-size="listForm.size"
        :pagerCount="listForm.pagerCount"
        :total="listForm.total"
        style="width: 95% ;margin-top:20px;"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog title="货运单详情" :visible.sync="truckOrderVisible" width="900px">
      <el-table
          :data="truckOrderList"
          border
          fit
          highlight-current-row
          style="width: 87% ;margin-top:30px;"
      >
        <el-table-column label="派车单id" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="货物内容" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.goods}}</span>
          </template>
        </el-table-column>
        <el-table-column label="货物重量" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.weight}}</span>
          </template>
        </el-table-column>
        <el-table-column label="派车单状态" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ state[scope.row.state] }}</span>
        </template>
      </el-table-column>
        <el-table-column label="意外成本" width="185" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.unexpectedCost }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {AccountOperate, getShippingOrderList} from "@/api/account";

export default {
  name: "myShippingOrder",
  data() {
    return {
      listForm:{
        page:1,
        size:20,
        total:0,
        pagerCount:5,
        orderby:[],
      },
      shippingOrderList1:[],
      truckOrderVisible:false,
      truckOrderList:[],
      state: ['','未接收','已接收','调度完成','已揽收','在途','到达','签收','结束','失败'],
      shippingOrderList: [
        {
          id: 0,
          creatorId: 0,
          creatorName: '',
          time: '',
          carrierId: 0,
          start: '',
          consignee: '',
          target: '',
          goods: '',
          weight: 0,
          distance: 0,
          state: 0,
          desc: '',
          unexpectedCost: 0,
          logisticsCost: 0,
          totalPrice: 0,
          remark: null,
          operationRecords: [
            {
              id: 0,
              type: 0,
              orderId: 0,
              taskType: 0,
              operatorId: 0,
              operateTime: '',
              location: '',
              unexpectedInfo: '',
              unexpectedPrice: 0,
              time: null,
              op: null
            },
          ],
          truckOrder: [
            {
              id: 0,
              orderId: 0,
              carrierId: 0,
              createTime: '',
              state: 0,
              driverId: 0,
              truckId: 0,
              goods: '',
              weight: 0,
              unexpectedCost: 0,
              location: '',
              driver: null,
              truck: null,
              shippingOrder: null,
              operationRecords: [
                {
                  id: 0,
                  type: 0,
                  orderId: 0,
                  taskType: 0,
                  operatorId: 0,
                  operateTime: '',
                  location: '',
                  unexpectedInfo: '',
                  unexpectedPrice: 0,
                  time: null,
                  op: null
                },
              ]
            },
          ],
          operatorId: null
        },
      ]
    }
  },
  mounted() {
    this.getShippingOrderList()
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    getShippingOrderList(){
      let data ={
        id:JSON.parse(localStorage.getItem("user")).id,
      }
      getShippingOrderList(data).then(res => {

        this.shippingOrderList1 = res.data.shippingOrderList
        // this.truckOrderList = res.data.shippingOrderList.truckOrder
        //  console.log(this.truckOrderList,1234)
        this.listForm.total=res.data.shippingOrderList.length
      }).catch(error => {
        console.log(error)
      })
    },
    Operate(item,state){
      let data ={
        state,
        orderId:item.id,
        operator:JSON.parse(localStorage.getItem("user")).id,
      }
      AccountOperate(data).then((res) => {
        this.$message.success("操作成功")
        this.getShippingOrderList()
      })
    },
    scanDesc(item){
      this.truckOrderList = item.truckOrder
      console.log(this.truckOrderList,1234)
      this.truckOrderVisible=true
    },
  }
}
</script>

<style scoped>

</style>
